<template>
  <div id="kbp" class="kbpContent">

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="$t('kbp.faq')" name="first">
        <child1 v-show="isChild1" />
        <div class="faqContent">
          <el-container>
            <el-aside width="200px" style="background: #f5f6fa;height: 650px;border: 1px solid #ccc;margin-top: 20px">
              <el-tree
                :data="commProblemsData"
                :props="defaultProps"
                style="background: #f5f6fa"
                @node-click="handNodeClick"
              />
            </el-aside>

            <el-main style="height: 650px;border: 1px solid #ccc;margin-top: 20px">
              <div class="mainContent">
                <el-scrollbar style="height:500px;">
                  <el-table
                    :data="kbpAnsData"
                    :stripe="true"
                    :show-header="false"
                    border
                    style="width: 100%;"
                    @expand-change="expandChangeFaq"
                  >
                    <el-table-column type="expand" prop="">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-row v-for="item in kbpDetailParamData" :key="item.id">
                            <h4>知识详情</h4>
                            <el-col>
                              <div style="color: #f7001c" v-html="item.knowledgeContent" />
                            </el-col>
                            <br>
                            <h4>知识附件</h4>
                            <el-col>
                              <el-row v-for="item in attachments" :key="item.id" style="margin-top: 5px">
                                <a target="_black" :href="item.attachURL">{{ item.attachName }}</a>
                              </el-row>
                            </el-col>
                          </el-row>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template slot-scope="scope">
                        <p style="color: blue">{{ scope.row.knowledgeTitle }}</p>
                        <p><span>创建人：</span>{{ scope.row.createdBy }}</p>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-scrollbar>
              </div>
              <el-footer style="margin-top: 30px">
                <el-row>
                  <el-col :span="20" :offset="4">
                    <div class="block">
                      <el-pagination
                        :current-page="page.currentPage"
                        :pager-count="5"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="page.pagesize"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.totalSum"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-footer>
            </el-main>
          </el-container>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('kbp.knowSearch')" name="second">
        <child2 v-show="isChild2" />
        <div class="searchContent">
          <div id="knowSearch" class="search">
            <el-row :gutter="10">
              <el-col :span="10" style="line-height: 40px">
                <div class="grid-content">
                  <el-input
                    id="searchKeywords"
                    ref="KeywordInput"
                    v-model="keywordsContent"
                    :placeholder="$t('tipData.inputWord')"
                  />
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content">
                  <el-select
                    ref="status1"
                    v-model="value"
                    :popper-append-to-body="this.selectOptionPositionOne"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button id="searchQuery" type="primary" @click="getKbpList"><span>{{ $t("kbp.inquiry") }}</span>
                </el-button>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="clearData"><span>{{ $t("kbp.cleanup") }}</span></el-button>
              </el-col>
            </el-row>
          </div>
          <div class="mainSearchContent">
            <el-main style="height: 550px">
              <el-scrollbar style="height:500px;">
                <el-table
                  :data="kbpListData"
                  :stripe="true"
                  :show-header="false"
                  border
                  style="width: 100%"
                  @expand-change="expandChange"
                >
                  <!--<el-table-column type="expand" prop="children">-->
                  <!--<template slot-scope="scope">-->
                  <!--<el-table>-->
                  <!--<el-table-column id="aaa" label="知识详情:" show-overflow-tooltip>-->
                  <!--&lt;!&ndash;<div id="ccc">{{scope.row.kbpDetailParamData.knowledgeContent}}</div>&ndash;&gt;-->
                  <!--<span>{{scope.row.titleName }}</span>-->
                  <!--</el-table-column>-->
                  <!--<br/>-->
                  <!--<el-table-column label="知识附件:"  prop="attachName" show-overflow-tooltip>-->
                  <!--<span class="ccc"></span>-->
                  <!--</el-table-column>-->
                  <!--</el-table>-->
                  <!--</template>-->
                  <!--</el-table-column>-->
                  <!--<el-table-column>-->
                  <el-table-column type="expand" prop="">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-row v-for="item in kbpDetailParamData" :key="item.id">
                          <h4>知识详情</h4>
                          <el-col>
                            <div style="color: #f7001c" v-html="item.knowledgeContent" />
                          </el-col>
                          <br>
                          <h4>知识附件</h4>
                          <el-col>
                            <el-row v-for="item in attachments" :key="item.id" style="margin-top: 5px">
                              <a :href="item.attachURL">{{ item.attachName }}</a>
                            </el-row>
                          </el-col>
                          <h4>关联知识</h4>
                          <el-col>
                            <el-row v-for="item in handRelateKnowsData" :key="item.id" style="margin-top: 5px">
                              <a @click="relatedKnowledge(item.id)">{{ item.title }}</a>
                            </el-row>
                            <el-row v-for="item in autoRelateKnowsData" :key="item.id" style="margin-top: 5px">
                              <a @click="relatedKnowledge(item.id)">{{ item.title }}</a>
                            </el-row>
                          </el-col>
                        </el-row>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column>
                    <template slot-scope="scope">
                      <p style="color: blue">{{ scope.row.titleName }}</p>
                      <p><span>创建人：</span>{{ scope.row.modifyUser }}<span
                        style="margin-left: 15px"
                      >创建时间：</span>{{ scope.row.modifyDate }}</p>
                    </template>
                  </el-table-column>
                </el-table>
              </el-scrollbar>
              <el-dialog
                title="关联知识详情"
                :visible.sync="centerDialogVisible"
                width="80%"
                left
              >
                <el-row v-for="item in relatedKbpDetailParamData" :key="item.id">
                  <p>知识详情</p>
                  <el-col>
                    <div style="color: #f7001c" v-html="item.knowledgeContent" />
                  </el-col>
                  <br>
                  <p>知识附件</p>
                  <el-col>
                    <el-row v-for="item in relatedAttachments" :key="item.id" style="margin-top: 5px">
                      <a :href="item.attachURL">{{ item.attachName }}</a>
                    </el-row>
                  </el-col>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = true">关闭</el-button>
                  </span>
                </el-row>
              </el-dialog>
            </el-main>
            <el-footer>
              <el-row>
                <el-col :span="20" :offset="4">
                  <div class="block">
                    <el-pagination
                      :current-page="currentPage"
                      :pager-count="5"
                      :page-sizes="[10, 20, 30, 50]"
                      :page-size="pagesize"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="totalSum"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                    />
                  </div>
                </el-col>
              </el-row>
            </el-footer>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import hucha1 from '@/views/kbp/faq/Faq'
import hucha2 from '@/views/kbp/search/Search'
import ThirdApi from '@/api/thirdAPI'

export default {
  components: {
    Child1: hucha1,
    Child2: hucha2
  },
  data() {
    return {
      activeName: 'first',
      isChild1: true,
      isChild2: true,
      commProblemsData: [],
      kbpAnsData: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      },
      // kbpDetailParamData: [],
      attachments: '',
      selectOptionPositionOne: false,
      // knowledgeId: '',
      page: {
        currentPage: 1,
        pagesize: 10,
        totalSum: 0
      },
      kbpAnsParam: {
        id: '',
        name: '',
        pageNum: '',
        pageSize: '',
        type: ''
      },
      centerDialogVisible: false,
      kbpParam: {
        keyword: '',
        limit: '',
        offset: '',
        series: '',
        userId: '',
        status: ''
      },
      knowledgeParam: {
        knowledgeId: '',
        userId: '',
        series: '',
        srcSystem: ''
      },
      // page: {
      //   currentPage: 1,
      //   pagesize: 10,
      //   totalSum: 0
      // },
      KeywordInput: '',
      knowledgeId: '',
      totalSum: 0,
      knowledgeContent: '',
      keywordsContent: '',
      // keywordsContent: sessionStorage.aaa || '',
      // attachments: '',
      relatedAttachments: '',
      kbpListData: [],
      kbpDetailParamData: [],
      relatedKnowledgeData: [],
      relatedKbpDetailParamData: [],
      autoRelateKnowsData: '',
      handRelateKnowsData: '',
      currentPage: 1,

      pagesize: 10,
      knowledge: {},
      value: '',
      tabName: '',
      options: [
        {
          value: '',
          label: this.$t('kbp.whole')
        },
        {
          value: '0',
          label: this.$t('kbp.normal')
        },
        {
          value: '3',
          label: this.$t('kbp.expired')
        }
      ]
    }
  },
  created() {
    this.getFaqTreeList()
    sessionStorage.aaa = ''
  },

  mounted() {
    // debugger
    // 就绪
    const self = this
    window.eventEmitter.$on('EventCallReleased', function() {
      self.value = ' '
      self.value = ''
      self.keywordsContent = ' '
      self.keywordsContent = ''
      // 跳转页面
      if (self.$router.history.current.name === 'reportLoss' || self.$router.history.current.name === 'nonContractualLoss' || self.$router.history.current.name === 'retailLoan' || self.$router.history.current.name === 'cardLossOtherServices' || self.$router.history.current.name === 'balanceInfo' || self.$router.history.current.name === 'detailedInfo' || self.$router.history.current.name === 'otherServices' || self.$router.history.current.name === 'lossRecord' || self.$router.history.current.name === 'cardServiceRecord') {
        self.$router.replace({ name: 'reportLoss' })
      } else if (self.$router.history.current.name === 'company' || self.$router.history.current.name === 'accInfo' || self.$router.history.current.name === 'companyCheque') {
        self.$router.replace({ name: 'company' })
      } else if (self.$router.history.current.name === 'publicInfo' || self.$router.history.current.name === 'foreignCurrencyRate' || self.$router.history.current.name === 'foreignExchangeRate' || self.$router.history.current.name === 'newOrOldAccIChecking' || self.$router.history.current.name === 'newOrOldCusIChecking' || self.$router.history.current.name === 'numOrIBANAccIChecking' || self.$router.history.current.name === 'oldAndNewLine' || self.$router.history.current.name === 'organizationName') {
        self.$router.replace({ name: 'publicInfo' })
      } else if (self.$router.history.current.name === 'kbp' || self.$router.history.current.name === 'Faq' || self.$router.history.current.name === 'Search') {
        self.$router.replace({ name: 'kbp' })
      } else {
        self.$router.replace({ name: 'personal' })
      }
    })
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'first') {
        // this.isChild1 = true
        // this.isChild2 = true
        this.tabName = 'first'
      } else if (tab.name === 'second') {
        // this.isChild1 = true
        // this.isChild2 = true
        this.tabName = 'second'
      }
    },
    handleSizeChange(val) {
      if (this.tabName === 'first') {
        this.page.pagesize = val
        this.currentPage = 1
        var data = this.kbpAnsParam
        this.handNodeClick(data)
      } else {
        this.page.pagesize = val
        this.page.currentPage = 1
        this.getKbpList()
      }
    },
    handleCurrentChange(val) {
      if (this.tabName === 'first') {
        this.page.currentPage = val
        var data = this.kbpAnsParam
        this.handNodeClick(data)
      } else {
        this.page.currentPage = val
        this.getKbpList()
      }
    },
    handNodeClick(data) {
      this.kbpAnsParam.id = data.id
      this.kbpAnsParam.name = 'RobotFAQ'
      this.kbpAnsParam.pageNum = this.page.currentPage
      this.kbpAnsParam.pageSize = this.page.pagesize
      this.kbpAnsParam.type = 'AGENT_FAQ'
      ThirdApi.kbpAnsAPI(this.kbpAnsParam.id, this.kbpAnsParam.name, this.kbpAnsParam.pageNum, this.kbpAnsParam.pageSize, this.kbpAnsParam.type).then(response => {
        this.kbpAnsData = response.data.list
        this.page.totalSum = Number(response.data.fullListSize)
      })
    },
    getFaqTreeList() {
      ThirdApi.kbpFaqAPI().then(response => {
        this.commProblemsData = response.data.children
      })
    },
    expandChangeFaq(row) {
      this.kbpDetailParamData = []
      if (row) {
        this.knowledgeId = row.knowledgeId
        ThirdApi.kbpDetailAPI(this.knowledgeId).then(response => {
          this.kbpDetailParamData.push(response.data)
          this.attachments = response.data.attachments
        })
      }
    },
    getKbpList() {
      // debugger
      if (this.$store.getters.get_KeyWordVal) {
        this.kbpParam.keyword = this.$store.getters.get_KeyWordVal
      } else {
        this.kbpParam.keyword = this.keywordsContent
      }
      this.kbpParam.limit = this.page.pagesize
      this.kbpParam.offset = this.page.currentPage
      this.kbpParam.series = 'BOCHW'
      this.kbpParam.userId = this.$store.getters.GET_USERID
      this.kbpParam.status = this.value
      ThirdApi.kbpAPI(this.kbpParam).then(response => {
        this.knowledge.kbpListData = response.data
        this.kbpListData = response.data.list
        this.totalSum = Number(response.data.fullListSize)
        // this.$store.getters.get_KeyWordVal = ''
        this.$store.commit('set_KeyWordVal', '')
      })
    },
    clearData() {
      this.kbpListData = []
      this.keywordsContent = ''
      this.currentPage = 1
      this.pagesize = 10
      this.totalSum = 0
    },
    expandChange(row) {
      this.kbpDetailParamData = []
      if (row) {
        this.knowledgeId = row.kid
        ThirdApi.kbpDetailAPI(this.knowledgeId).then(response => {
          this.kbpDetailParamData.push(response.data)
          this.attachments = response.data.attachments
          this.getRelatedKnowledge(row.kid)
        })
      }
    },
    getRelatedKnowledge(param) {
      // debugger
      this.knowledgeParam.knowledgeId = param
      this.knowledgeParam.userId = this.$store.getters.GET_USERID
      this.knowledgeParam.series = 'BOCHW'
      this.knowledgeParam.srcSystem = ''
      ThirdApi.kbpQueryRelatedKnowledgeAPI(this.knowledgeParam).then(response => {
        this.relatedKnowledgeData.push(response.data)
        this.autoRelateKnowsData = response.data.autoRelateKnows
        this.handRelateKnowsData = response.data.handRelateKnows
      })
    },
    relatedKnowledge(param) {
      this.relatedKbpDetailParamData = []
      this.centerDialogVisible = true
      this.knowledgeId = param
      ThirdApi.kbpDetailAPI(this.knowledgeId).then(response => {
        this.relatedKbpDetailParamData.push(response.data)
        this.relatedAttachments = response.data.attachments
      })
    }
  }
}
</script>
<style scoped>
  .kbpContent {
    width: 100%;
    height: 100%
  }

  .mainContent {
    height: 490px;
    border: 1px solid #ccc;
    margin-top: 20px
  }

  a:hover {
    color: #ff6633;
    text-decoration: underline;
  }

  .el-dialog__header {
    background: darkred;
  }

  .mainSearchContent {
    height: 620px;
    border: 1px solid #ccc;
    margin-top: 10px
  }

  a:hover {
    color: #ff6633;
    text-decoration: underline;
  }
</style>
